<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>设备历史记录列表查询</title>
    <meta name="decorator" content="nblank"/>
    <%@include file="/WEB-INF/views/include/treetable.jsp" %>
    <link href="${ctxStatic}/modules/biz/record/equItemHisList.css" rel="stylesheet" itself="true"/>
</head>
<body>
<%--<sys:message content="${message}"/>--%>
<div class="content container">
    <h2 class="page-title">设备历史记录列表查询
    </h2>
    <div class="row">
        <div class="col-md-12">
            <section class="widget widget-tabs">
                <header>
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="javascript:;">${officebiz.name}设备记录列表</a>
                        </li>
                    </ul>
                </header>
                <%--<sys:message content="${message}"/>--%>
                <div class="body tab-content">
                    <div class="tab-pane active clearfix" style="position: relative;">
                        <form:form id="inputForm" modelAttribute="equipmentItemRecordSuper" method="post" class="form-inline widget">
                            <form:hidden path="typeId"/>
                            <input type="hidden" id="inputOfficeId" value="${officebiz.id}">
                            <input type="hidden" id="pageNo" name="pageNo"/>
                            <input type="hidden" id="pageSize" name="pageSize"/>

                            <div class="row pd-first">
                                <div class="col-md-4 col-qc-4 git-first" style="display: ${singleStation == 'yes'?'none':'block'}">
                                    <label class="form-group mg-right-10 ps-r-4 pull-left"><span style="color:red;">*</span>站点:</label>
                                    <sys:treeselectExtend id="office" name="office.id" value="${user.office.id}"
                                                    labelName="office.name" labelValue="${user.office.name}"
                                                    title="站点" url="/sys/office/treeDataThree?type=2"
                                                    cssClass="form-control input-transparent" notAllowSelectRoot="true"
                                                    notAllowSelectParent="false" officeGrade="true"/>
                                </div>
                                <div class="col-md-4 col-qc-4 git-two">
                                    <label class="form-group mg-right-10" for="sgroupId"><span style="color:red;">*</span>组查询:</label>
                                    <form:select path="sgroupId" class="selectpicker" data-style="btn-primary">
                                        <form:option value="" label="请选择"/>
                                    </form:select>
                                </div>
                                <div class="col-md-4 col-qc-4 git-two">
                                    <label class="form-group mg-right-10" for="gitemId"><span style="color:red;">*</span>设备查询:</label>
                                    <form:select path="gitemId" class="selectpicker" data-style="btn-primary">
                                        <form:option value="" label="请选择"/>
                                    </form:select>
                                </div>
                            </div>
                            <div class="row pd-first">
                                <div class="form-group min-width-500">
                                    <label class="control-label min-width-80">&nbsp;&nbsp;&nbsp;&nbsp;起止时间:</label>
                                    <div class="input-group date timeb1 width-168" data-link-field="stime1">
                                        <form:input path="timeBegin" htmlEscape="false" maxlength="10" readonly="true"
                                                    size="32" class="form-control input-transparent"/>
                                            <%--<div class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></div>--%>
                                        <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                                        </div>
                                    </div>
                                    <span>-</span>
                                    <div class="input-group date timee1 width-168" data-link-field="etime1">
                                        <form:input path="timeEnd" htmlEscape="false" maxlength="10" readonly="true"
                                                    size="32" class="form-control input-transparent"/>
                                        <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                                        </div>
                                    </div>
                                    <input id="btnSubmit" class="btn btn-primary mg-left-50" type="button" value="查询"/>
                                    <%--<input id="btnExport" class="btn btn-primary mg-left-50" type="button" value="导出"/>--%>
                                </div>
                            </div>
                        </form:form>
                        <div class="widget mg-bottom">
                            <div class="list-box" id="inner-content-div">
                                <table id="mainTable"
                                       class="table table-striped  table-condensed tree_table overflow-auto">
                                    <thead>
                                    <tr>
                                        <th>暂无数据</th>
                                    </tr>
                                    </thead>
                                    <tbody class="table-cor">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row" id="pageDiv"></div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<script type="text/javascript">
    var noData = "无数据";
    var $officeId=$("#officeId");
    var $btnSubmit=$("#btnSubmit");
    var $btnExport=$("#btnExport");
    var $sgroupId=$("#sgroupId");
    var $gitemId=$("#gitemId");
    var $timeBegin=$("#timeBegin");
    var $timeEnd=$("#timeEnd");

    $(function () {
        // 进入本页面的默认设置
        //设置按钮 下拉菜单不可用
        $btnSubmit.attr("disabled", true);
        $btnExport.attr("disabled", true);
        $sgroupId.attr("disabled", true);
        $gitemId.attr("disabled", true);//
        //清楚下拉菜单除第一条以外的元素
        $sgroupId.find("option:not(:first)").remove();
        $gitemId.find("option:not(:first)").remove();
        //刷新
        $sgroupId.change().selectpicker('refresh');
        $gitemId.change().selectpicker('refresh');

        $timeBegin.val(showTime(-10, 0));//默认开始时间
        $timeEnd.val(showTime(0, 0));//默认截止时间



//        组查询的change事件
        $sgroupId.on('changed.bs.select', function () {
            $btnSubmit.attr("disabled", true);
            $btnExport.attr("disabled", true);
            $gitemId.attr("disabled", true);
            $gitemId.find("option:not(:first)").remove();
            if ($sgroupId.val() == "") {
                $gitemId.change().selectpicker('refresh');
            } else {
                $.ajax({
                    type: "get",
                    url: "${ctx}/biz/sgcfg/itemlist",
                    data: {
                        sgroupId: $sgroupId.val()
                    },
                    dataType: "json",
                    success: function (data) {
                        $.each(data, function (indexColumn, item) {
                            if(item.gitem.id != "37") {
                                $("<option value='" + item.gitem.id + "'>" + item.gitem.name + "</option>").appendTo("#gitemId");
                            }
                        });
                        $gitemId.attr("disabled", false);
                        $gitemId.change().selectpicker('refresh');
                    }
                });
            }
        });

//        设备查询的change事件
        $gitemId.on('changed.bs.select', function () {
            $btnSubmit.attr("disabled", true);
            $btnExport.attr("disabled", true);
            if ($gitemId.val() != "") {
                $.ajax({
                    type: "get",
                    url: "${ctx}/biz/ehRecord/etypeKid",
                    data: {
                        itemId: $gitemId.val()
                    },
                    dataType: "json",
                    success: function (data) {
                        $('#typeId').val(data);
                        $btnSubmit.attr("disabled", false);
                        $btnExport.attr("disabled", false);
                    }
                });
            }
        });

//        表单提交事件
        $btnSubmit.click(function () {
            var ac = new Date($timeBegin.val().replace("-", "/").replace("-", "/"));
            var bc = new Date($timeEnd.val().replace("-", "/").replace("-", "/"));
            if (ac >= bc) {
                Messenger().post("起始时间必须小于截止时间");
            } else {
                submitAjax($('#typeId').val());
            }
        });

        $('#inner-content-div').slimScroll({
            axis: 'x',
            height: $('#inner-content-div').outerHeight(true),
            width: 'auto',
            size: '10px',
            allowPageScroll: true,
            alwaysVisible: true
        }).css("width", "").css("height", "").parent().css("height", "").css("width", "");

    });
    /** jquery 部分结束 */

    /** 表单提交ajax部分 -- 开始 */
    function submitAjax(action) {
        $btnSubmit.attr("disabled", true).attr("value", "查询中...");
        $btnExport.attr("disabled", true);
        $.ajax({
            type: "get",
            url: "${ctx}/biz/ehRecord/" + action + "Records",
            data: {
                officeId: $officeId.val(),
                sgroupId: $sgroupId.val(),
                gitemId: $gitemId.val(),
                timeBegin: $('#timeBegin').val(),
                timeEnd: $('#timeEnd').val(),
                pageNo: $("#pageNo").val(),
                pageSize: $("#pageSize").val()
            },
            dataType: "json",
            success: function (data) {
                $("#pageDiv").html("");
                $("#mainTable thead").html("");
                $("#mainTable tbody").html("");
                var heightTemp;
                var colspanValue = 0;
                if (data.dataList != null) {
                    if (data.titleList != null) {
                        var title = "<tr style='height: 40px;'>";
                        $.each(data.titleList, function (indexColumn, item) {
                            title += "<th>" + item + "</th>";
                            colspanValue++;
                        });
                        title += "</tr>";
                        $("#mainTable thead").append(title);
                    }
                    $.each(data.dataList, function (indexColumn, item) {
                        var tableData = "";
                        tableData += "<tr>";
                        var columns = item.split(",");
                        columns.pop();//删除数组最后一个元素，该元素为""
                        $.each(columns, function (indexColumn, item) {
                            if (indexColumn == 0) {
                                tableData += "<td>" + splitTime(new Date(item), 1) + "</td>";
                            } else {
                                if (item !="null"&& item != "") {
                                 tableData += "<td>" + item + "</td>";
                                }else {
                                    item="-";
                                    tableData += "<td>" + item + "</td>";
                                }
                            }
                        });
                        tableData += "</tr>";
                        $(tableData).appendTo("#mainTable tbody");
                    });
                    $("#pageDiv").html("<div class='row'>" + data.html + "</div>");
                    $("#pageNo").val(data.pageNo);
                    $("#pageSize").val(data.pageSize);
                    heightTemp = $('.table-cor').outerHeight(true) + 40;
                    $btnSubmit.attr("disabled", false).attr("value", "查询");
                    $btnExport.attr("disabled", false);
                } else {
                    $("<tr><td align='center'>" + noData + "</td></tr>").appendTo("#mainTable tbody");
                    heightTemp = $('.table-cor').outerHeight(true);
                    $btnSubmit.attr("disabled", false).attr("value", "查询");
                }
                $('#inner-content-div').slimScroll({
                    height: heightTemp
                }).css("width", "").css("height", "").parent().css("height", "").css("width", "");
            },
            error: function () {
                console.info("errorinfo");
                $("#pageDiv").html("");
                $("#mainTable thead").html("");
                $("#mainTable tbody").html("");
                $("<tr><td align='center'>" + noData + "</td></tr>").appendTo("#mainTable tbody");
                heightTemp = $('.table-cor').outerHeight(true);
                $('#inner-content-div').slimScroll({
                    height: heightTemp
                }).css("width", "").css("height", "").parent().css("height", "").css("width", "");
                $btnSubmit.attr("disabled", false).attr("value", "查询");
            }
            });
    }
    /** 表单提交ajax部分 -- 结束 */

    /** 站点控件选择功能 **/
    function stationSelect(officeIdVar) {
        $btnSubmit.attr("disabled", true);
        $btnExport.attr("disabled", true);
        $sgroupId.attr("disabled", true);
        $gitemId.attr("disabled", true);
        $sgroupId.find("option:not(:first)").remove();
        $gitemId.find("option:not(:first)").remove();

        if (officeIdVar == "") {
            $sgroupId.change().selectpicker('refresh');
            $gitemId.change().selectpicker('refresh');
        } else {
            $.ajax({
                type: "post",
                url: "${ctx}/biz/ehRecord/sgroupSelect?officeId=" + officeIdVar,
                dataType: "json",
                success: function (data) {
                    $.each(data, function (indexColumn, item) {
                        $("<option value='" + item.id + "'>" + item.name + "</option>").appendTo("#sgroupId");
                    });
                         $sgroupId.attr("disabled", false);
                    $sgroupId.change().selectpicker('refresh');
                    $gitemId.change().selectpicker('refresh');
                }
            });
        }
    }

    /** 导出事件 */
    $btnExport.click(function () {
        $("#inputForm").attr("action", "${ctx}/biz/ehRecord/exportRecords?officeId="+$officeId.val());
        $("#inputForm").submit();
    });

    /** 分页功能(必须放在jquery外) -- 开始*/
    function page(n, s) {
        $("#pageNo").val(n);
        $("#pageSize").val(s);
        var ac = new Date($timeBegin.val().replace("-", "/").replace("-", "/"));
        var bc = new Date($timeEnd.val().replace("-", "/").replace("-", "/"));
        if (ac >= bc) {
            Messenger().post("起始时间必须小于截止时间");
        } else {
            submitAjax($('#typeId').val());
        }
        return false;
    }
    /** 分页功能 -- 结束 */

    /**
     * 单站点功能
     */
    <%--function initSgroup(){--%>
        <%--$btnSubmit.attr("disabled", true);--%>
        <%--$btnExport.attr("disabled", true);--%>
        <%--$sgroupId.attr("disabled", true);--%>
        <%--$gitemId.attr("disabled", true);--%>

        <%--$sgroupId.find("option:not(:first)").remove();--%>
        <%--$gitemId.find("option:not(:first)").remove();--%>

        <%--$sgroupId.change().selectpicker('refresh');--%>
        <%--$gitemId.change().selectpicker('refresh');--%>
        <%--$.ajax({--%>
            <%--type: "post",--%>
            <%--url: "${ctx}/biz/ehRecord/sgroupSelect",--%>
            <%--dataType: "json",--%>
            <%--success: function (data) {--%>
                <%--$.each(data, function (indexColumn, item) {--%>
                    <%--$("<option value='" + item.id + "'>" + item.name + "</option>").appendTo("#sgroupId");--%>
                <%--});--%>
                <%--$sgroupId.change().selectpicker('refresh');--%>
            <%--}--%>
        <%--});--%>
        <%--$sgroupId.attr("disabled", false);--%>
    <%--}--%>


//    $(function () {
//        if (officeId != null && officeId != "") {
//            if(singleStation=='yes'){
//                initSgroup();
//            }
//            $btnSubmit.attr("disabled", true);//查询按钮不可用
//        }
//    });

</script>
<script type="text/javascript" src="${ctxStatic}/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="${ctxStatic}/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    $('.timeb1').datetimepicker({
        autoclose: true,
        format: "yyyy-mm-dd hh:ii",
        language: 'zh-CN',
        startView: 3,
        minView: 0,
        maxView: 4,
        forceParse: 0,
        linkFormat: "yyyy-mm-dd hh:ii:ss"
    });
    $('.timee1').datetimepicker({
        disabled: true,
        autoclose: true,
        format: "yyyy-mm-dd hh:ii",
        language: 'zh-CN',
        startView: 3,
        minView: 0,
        maxView: 4,
        forceParse: 0,
        linkFormat: "yyyy-mm-dd hh:ii:ss"
    });
</script>
</body>
</html>